<template>
  <div class="content-outer">
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button v-if="!isField" @click="active('Add', '新增')">新增</el-button>
        </div>
      </div>
    </Block>
    <div class="table-table">
      <div class="table-conten">
        <BiTable ref="el" :loading="loading" :data="tableData" size="medium" :column="tableColums" fixed="sticky" fixed-offset="50" layout="total, prev, pager, next" :auto-scroll="false" @pagination="handlePageChange">
          <template v-slot:image_url="{ row }">
            <div class="images">
              <SvgIcon icon-class="drag2" class="drag" style="font-size: 14px; margin: -1px 3px 0 0; width: 20px"></SvgIcon>
              <el-image :src="row.image_url" style="width: 50px; border-radius: 5px"></el-image>
            </div>
          </template>
          <template v-slot:status="{ row }">
            <div>
              <el-switch v-model="row.status" active-value="1" inactive-value="0" @change="onStatuschagne(row)"></el-switch>
            </div>
          </template>
          <template v-slot:operate="{ row }">
            <div>
              <el-button type="text" size="medium" @click="edit(row)">编辑</el-button>
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                style="margin-left:10px;"
                title="确定删除吗？"
                @confirm="delRow(row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  size="medium"
                >删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </BiTable>
      </div>
    </div>
    <BiDrawer v-model="drawer.visible" :drawer-title="drawer.title" :component="drawerComponent.Add" :data="drawer.row" drawer-size="500" @ok="onSubmit" @cancel="close"></BiDrawer>
    <!-- <BiDrawer v-model="drawer.hot" :drawer-title="drawer.title" :component="drawerComponent.hot" drawer-size="55%" @ok="onSubmit"></BiDrawer>
    <BiDrawer v-model="drawer.swiper" :drawer-title="drawer.title" :component="drawerComponent.swiper" drawer-size="55%" @ok="onSubmit"></BiDrawer>
    <BiDrawer v-model="drawer.theater" :drawer-title="drawer.title" :component="drawerComponent.theater" drawer-size="55%" @ok="onSubmit"></BiDrawer> -->
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
import Add from './components/add.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { GET_wall_cover_index, POST_wall_cover_sort, delet_wall_cover_dev, POST_wall_cover_save, POST_wall_cover_status } from '@/api/appContent/wallpaper'
export default {
  name: 'Wallpaper',
  components: {
    draggable,
    SvgIcon
  },
  props: ['isField', 'resizeData'],
  data() {
    return {
      loading: false,
      tableData: [],
      tableColums: [
        {
          label: '图片',
          prop: 'image_url',
          slotScope: true
        },
        {
          label: '状态',
          prop: 'status',
          slotScope: true
        },
        {
          label: '跳转短剧',
          prop: 'playlet_title'
        },
        {
          label: '创建人',
          prop: 'creator'
        },
        {
          label: '创建时间',
          prop: 'create_time'
        },
        {
          label: '操作',
          prop: 'operate',
          slotScope: true
        }
      ],
      page_info: {
        total: 0,
        page: 1,
        page_size: 20
      },
      drawer: {
        visible: false,
        title: '',
        row: {}
      },
      drawerComponent: {
        Add: Add
      },
      mini_app_id: window.localStorage.getItem('mini_app_id')
    }
  },
  watch: {
    resizeData(newVal, oldVal) {
      if (newVal) {
        this.onGetWallpaperList()
      }
    }
  },
  mounted() {
    this.onGetWallpaperList()
    this.$nextTick(() => {
      this.drag()
    })
  },
  methods: {
    close() {
      this.drawer = {
        visible: false,
        title: '',
        row: {}
      }
    },
    handlePageChange() {},
    active(type, title) {
      if (type == 'Add') {
        this.drawer.title = title
        this.drawer.visible = true
        this.drawer.row = {}
      }
    },
    async onGetWallpaperList() {
      this.loading = true
      this.$set(this, 'tableData', [])
      const res = await GET_wall_cover_index({
        mini_app_id: window.localStorage.getItem('mini_app_id')
      })
      if (res.status_code == 1) {
        this.$set(this, 'tableData', res.data.data)
      }
      this.loading = false
    },
    drag() {
      const _this = this
      // 首先获取需要拖拽的dom节点
      const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0]
      Sortable.create(el1, {
        disabled: false, // 是否开启拖拽
        ghostClass: 'sortable-ghost', // 拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        group: {
          // 是否开启跨表拖拽
          pull: false,
          put: false
        },
        onEnd({ newIndex, oldIndex }) {
          // 修改data中的数组，
          const targetRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, targetRow)
          const arr = []
          _this.tableData.forEach((item, index) => {
            arr.push({
              id: item.id,
              sort: index
            })
          })
          _this.onWallCoverSort(arr)
        },
        onChoose: function (/** Event*/ evt) {
          console.log(evt)
        }
      })
    },
    async onWallCoverSort(arr) {
      const res = await POST_wall_cover_sort({
        list: arr
      })
      if (res.status_code == 1) {
        this.onGetWallpaperList()
      }
    },
    delRow(row) {
      this.deletWall(row)
    },
    async deletWall(row) {
      const res = await delet_wall_cover_dev({
        id: row.id
      })
      if (res.status_code == 1) {
        this.$message.success('删除成功！')
        this.onGetWallpaperList()
      }
    },
    onSubmit({ type, data }) {
      if (type == 'Add') {
        this.onAddWallCoverSave(data)
      }
      this.drawer = {
        visible: false,
        title: '',
        row: {}
      }
    },
    async onAddWallCoverSave(data) {
      const res = await POST_wall_cover_save(data)
      if (res.status_code == 1) {
        this.$message.success(res.msg)
        this.onGetWallpaperList()
      }
    },
    edit(row) {
      this.drawer.title = '编辑'
      this.drawer.visible = true
      this.drawer.row = row
    },
    async onStatuschagne(row) {
      console.log(row.id, row.status)
      const res = await POST_wall_cover_status({
        id: row.id,
        status: row.status
      })
      if (res.status_code == 1) {
        this.$message.success(res.msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.drag {
  cursor: pointer;
}
 .action-box{
    margin-bottom: 0;
    height: 32px;
}
.table-conten {
  padding: 20px;
  padding-top: 0;
  background-color: #fff;
}
.images {
  display: flex;
  align-items: center;
}
</style>